<template>
  <div class="flex flex-wrap gap-4">

    <el-card shadow="hover">
      <el-row>
        <el-col :span="8">
          <el-input
            size="large"
            placeholder="请输入患者病历号"
            v-model="searchObject.caseNumber"
          />
        </el-col>
        <el-col :span="8" :offset="1">
          <el-input
            size="large"
            placeholder="请输入患者姓名"
            v-model="searchObject.realName"
        /></el-col>
        <el-col :span="6" :offset="1">
          <el-button size="large" @click="getGiveRegisterInfo">搜索</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="tableData" style="width: 100%; margin-top: 20px">
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="realName" label="患者姓名" />
            <el-table-column prop="caseNumber" label="患者病历号" />
            <el-table-column prop="age" label="患者年龄" />
            <el-table-column prop="gender" label="患者性别" />
            <el-table-column >
              <template #default="scope">
                <el-button
                  type="primary"
                  @click="showPrecMedicine(scope.row)"
                >
                 显示药品
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          
            <el-pagination @current-change="handleCurrentChange"
             style="margin-top: 15px;"
              layout="prev, pager, next ,total,jumper,sizes"  
               v-model:currentPage="currentPage"
              v-model:page-size="pageSize"
               :page-sizes="[5, 10, 15]" 
               :total="total" />
        
        </el-col>
      </el-row>
    </el-card>
    <h1>发药信息</h1>
    <el-card shadow="never"> 
    
       
          <el-table :data="presTableData" style="width: 100%; margin-top: 20px">
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="drug_code" label="药品编号" />
            <el-table-column prop="drug_name" label="药品名称" />
        
            <el-table-column prop="drug_unit" label="包装单位" />
            
            <el-table-column prop="drug_price" label="单价" />
            <el-table-column prop="drug_number" label="药品数量" />
            <el-table-column >
              <template #default="scope">
                <el-button
                  type="primary"
                  @click="givePrecMedicine(scope.row)"
                >
                 发药
                </el-button>
              </template>
            </el-table-column>
          </el-table>
    
      
    </el-card>


  </div>
</template>
<script setup>
import axios from "axios";
import { ref, reactive, watch } from "vue";
//每页显示的数量，默认每页显示5条记录
const pageSize = ref(5)
//当前页，默认第一页
const currentPage = ref(1)
const handleCurrentChange =()=>{
   console.log('-------',currentPage.value,pageSize.value)
   getGiveRegisterInfo();
}
const presTableData=ref([]);
const showPrecMedicine=(row)=>{
  axios
    .get(`/drugstore/api/prescription/getPrescriptionByRegisterId/${row.id}/100/1`)
    .then(function (response) {
      let { data } = response;
      presTableData.value = data.results.list;
    
    })
    .catch(function (error) {
      console.log(error);
    });
}

const givePrecMedicine=(row)=>{
  console.log(row)
  axios
    .put(`/drugstore/api/prescription/givePresById/${row.id}/${row.drug_code}/${row.drug_number}/${row.drug_price}/${row.drug_id}/${row.employee_id}/${row.register_id}`)
    .then(function (response) {
      // let { data } = response;
      // presTableData.value = data.results.list;
      //前端处理  将数组的元素从数组里移除出去
      // let arr = presTableData.value;
      // console.log(arr)
      let newArrayData=presTableData.value.filter((item)=>item.id!=row.id)
      presTableData.value=newArrayData;


      console.log('更新成功')
    })
    .catch(function (error) {
      console.log(error);
    });
}
const tableData = ref([]);
let total = ref(0);
let searchObject = reactive({ realName: "", caseNumber: "" });

const getGiveRegisterInfo = () => {
  axios
    .get("/drugstore/api/register/getRegisterPrescriptInfo", {
      params:{realName:searchObject.realName, 
        caseNumber:searchObject.caseNumber,
         pageSize:pageSize.value,
         drugState:"已缴费",
         currentPage:currentPage.value}
    })
    .then(function (response) {
      let { data } = response;
      tableData.value = data.results.list;
      total.value=data.results.total
    })
    .catch(function (error) {
      console.log(error);
    });
};
getGiveRegisterInfo();
watch(searchObject, () => {
  getGiveRegisterInfo();
});
</script>
<style scoped>

</style>
